import React, { useState, useEffect, useRef } from 'react'
import './myscss/Phone.scss'

import axios from 'axios';
import { ActionSheet, Cell } from 'react-vant';
import { Toast } from 'react-vant';

import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Phone() {
  let navigate = useNavigate();

  const [phone_val1, setPhone_val1] = useState('')
  const [phone_val2, setPhone_val2] = useState('')
  let [codeTxt, setCodeTxt] = useState('发送验证码')
  const [list_phone, setList_phone] = useState([])
  let [countdown, setCountdown] = useState(60)
  let [code, setCode] = useState('788674')
  let getCode = async () => {
    //发送验证码
    let { data } = await axios.get('http://localhost:3000/kwl_getCode?phone=' + phone_val1)
    setCode(data)
    //倒计时

    let timer = setInterval(() => {
      setCountdown(prevCountdown => {
        if (prevCountdown <= 1) {
          clearInterval(timer)
          setCodeTxt('发送验证码')
          return 60
        } else {
          setCodeTxt(prevCountdown - 1 + 's秒后重新发送')
          return prevCountdown - 1
        }
      })
    }, 1000)
  }
  let register = async () => {
    let pho = /^1[3-9]\d{9}$/
    if (phone_val1 === '') {
      Toast('请输入手机号')
    } else if (pho.test(phone_val1) === false) {
      Toast('手机号格式不正确')
    } else if (phone_val2 === '') {
      Toast('验证码不能为空')
    } else if (phone_val2 !== code) {
      Toast('验证码不正确')
    } else {
      let obj = {
        phone: phone_val1,
        id:list_phone[list_phone.length - 1].id 
      }
      let { data } = await axios.post('http://localhost:3000/update_phone', obj)
      console.log(data.code);
      if (data.code === 200) {
        Toast('修改成功')
        navigate('/MinPage/Setup')
      } else {
        Toast('该手机号已被占用')
      }
    }
  }
  let getPhone = async () => {
    let { data: { list_phone } } = await axios.get('/user_phone')
    setList_phone(list_phone)
  }

  // 使用 useEffect 设置定时器
  useEffect(() => {
    getPhone()
   
  }, []); // 空数组作为第二个参数，表示只在组件挂载和卸载时运行










  return (
    <div id='Phone'>
      <div id="main">
  
        <div className='fans_length'>
          <b onClick={() => { navigate('/MinPage/Setup') }}>&lt;</b><span>修改手机号</span>
        </div>
        <div className='phone_main'>
          <h4>您的手机号为:{list_phone[list_phone.length - 1] ? list_phone[list_phone.length - 1].phone : ''}</h4>
          <div className='phone_cid'>
            <input type="text" placeholder='请输入新的手机号' value={phone_val1} onChange={(e) => { setPhone_val1(e.target.value) }}
              leftIcon={<svg t="1724673153483" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1596" width="40" height="40"><path d="M702.699388 60.945047 321.284238 60.945047c-57.463044 0-104.022314 46.591131-104.022314 104.018052l0 693.454702c0 57.426921 46.560293 104.019075 104.022314 104.019075l381.416174 0c57.463044 0 104.022314-46.592155 104.022314-104.019075L806.722726 164.963099C806.722726 107.537202 760.163456 60.945047 702.699388 60.945047zM477.317197 95.617731l69.349233 0c9.582632 0 17.336541 7.754614 17.336541 17.33583 0 9.582239-7.753909 17.336854-17.336541 17.336854l-69.349233 0c-9.581609 0-17.336541-7.754614-17.336541-17.336854C459.980656 103.372346 467.735588 95.617731 477.317197 95.617731zM511.992325 920.077116c-24.482581 0-44.324277-19.840884-44.324277-44.322461 0-24.480554 19.84272-44.322461 44.324277-44.322461 24.481557 0 44.324277 19.84293 44.324277 44.322461C556.317626 900.237255 536.473882 920.077116 511.992325 920.077116zM737.373493 771.736603c0 9.582239-7.753909 17.33583-17.336541 17.33583L303.946674 789.072433c-9.582632 0-17.337564-7.753591-17.337564-17.33583L286.60911 182.299953c0-9.582239 7.754932-17.33583 17.337564-17.33583l416.090278 0c9.582632 0 17.336541 7.754614 17.336541 17.33583L737.373493 771.736603z" fill="#2c2c2c" p-id="1597"></path></svg>}
            />
          </div>
          <div className='phone_yzm'>
            <input type="text" placeholder='请输入验证码' value={phone_val2} onChange={(e) => { setPhone_val2(e.target.value) }}
              leftIcon={<svg t="1724673443762" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2679" width="40" height="40"><path d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z" fill="" p-id="2680"></path></svg>}
            />
            <span onClick={getCode}>{codeTxt}</span>
          </div>
          <div>
            <button onClick={()=>{register()}}>提交</button>
          </div>
        </div>

      </div>
    </div>
  )
}

